<template lang="html">
    <div class="details">
                   <!-- loading -->
        <div v-if="!loading" class="loading_show">
                <mt-spinner type="fading-circle" :size="100" color="#ff7ba0"></mt-spinner>
        </div>
        <div class="details_cover" >
            <img :src="movies_cover" alt="">
        </div>
        <div class="movies_words">
            {{movies_details.name}}
        </div>
        <div class="about_movies">
            <span class="about_key">导演：</span><span>{{movies_details.director}}</span>
        </div>
        <div class="about_movies clearfix">
            <div class="about_key fl">主演：</div>
            <div class="allactors">
                <span class="actors_name" v-for="item in movies_details.actors">{{item.name}}</span>
            </div>
        </div>
        <div class="about_movies">
            <span class="about_key">地区语言：</span><span>{{movies_details.nation+'('+movies_details.language+')'}}</span>
        </div>
        <div class="about_movies">
            <span class="about_key">类型：</span><span>{{movies_details.category}}</span>
        </div>
        <div class="about_movies">
            <span class="about_key">上映日期：</span><span>{{format(movies_details.premiereAt)}}</span><span>上映</span>
        </div>
        <div class="more_info">
            <p>{{movies_details.synopsis}}</p>
        </div>
    </div>
</template>


<script>
import axios from "axios";
import router from "../router/router.js";
export default {
  data: function() {
    return {
      movies_details: {},
      movies_cover: [],
      loading: false
    };
  },

  methods: {
    format: function(time) {
      var coming_time = new Date(time);
      var year = coming_time.getFullYear();
      var month = coming_time.getMonth() + 1;
      var date = coming_time.getDate();
      return month + "月" + date + "日";
    }
  },
  created: function() {
    var that = this;

    axios
      .get("https://m.maizuo.com/v4/api/film/" + that.$route.query.id)
      .then(function(res) {
        that.loading = true;

        that.movies_details = res.data.data.film;
        that.movies_cover = that.movies_details.cover.origin;
        // console.log(that.movies_details);
      });
  }
};
</script>

<style lang="scss">
.details {
  font-size: 12px;

  .details_cover {
    width: 100vw;
    height: 32vh;
    img {
      width: 100%;
    }
  }
  .movies_words {
    margin: 16px auto;
    border-left: 16px solid RGB(228, 200, 156);
    font-size: 16px;
    padding-left: 4px;
  }
  .about_movies {
    // height: 18px;
    // overflow: hidden;
    margin-bottom: 10px;
    padding-left: 20px;
    .about_key {
      display: inline-block;
      text-align: justify;
      width: 60px;
      // &:after{
      //     content: ".";
      //     height: 1px;
      //     visibility: hidden;
      // }
    }
    .allactors {
      padding-left: 60px;
    }
    .actors_name {
      padding: 0 5px;
      &:not(:last-child) {
        border-right: 1px solid #909090;
      }
    }
    .actors_name:nth-of-type(1) {
      padding-left: 0;
    }
  }
  .more_info {
    text-overflow: ellipsis;
    margin-bottom: 80px;
    padding-left: 20px;
    padding-right: 20px;
  }
}
</style>
